<script>
	// Columnas de la tabla cliente
	var cols = new Array("id", "nombre", "apellido", "telefono", "email", "direccion", "localidad", "provincia");

	// document ready
	$(document).ready( function() {
		
		// event binding
		$('#refreshListButton').bind('click', reloadList);
		$('#agregarButton').bind('click', showModal);
		$('#editButton').bind('click', getCliente);
		$('#button-save-cliente').bind('click', saveCliente);
		$('#deleteButton').bind('click', deleteCliente);
		$('#searchButton').bind('click', searchCliente);
		$('#localidad').bind('change', toggleLocalidad);

		$('#nacimiento-calendar').bind('click', function() {
			$('#nacimientoDP').datepicker();
			$('#nacimientoDP').datepicker('show');
		});
		
		// fill localidades combo
		getLocalidades();
		
		// fill provincias combo
		getProvincias();
		
		reloadList();
	});
	
	// Ventana modal para agregar / editar clientes
	$("#agregarCliente").modal();
	
	/**
	 * Abre la ventana modal de cliente
	 */
	function showModal() {

		$("#agregarCliente").modal();

		$(':input', '#clienteForm').not(':button, :submit, :reset')
		  							.val('')
		  							.removeAttr('checked')
		  							.removeAttr('selected');
	}
	
	/**
	 * Fill localidades combo
	 */
	function getLocalidades() {
		$.fn.getLocalidadesBsAs('localidad');
	}
	
	/**
	 * Fill provincias combo
	 */
	function getProvincias() {
		$.fn.getProvincias('provincia');
	}
	
	/**
	 * Toggle 'otra localidad' visibility
	 */
	function toggleLocalidad(entity) {
		var localidad_selected = $('#localidad').val();
		if (localidad_selected == "") {
			$('#otra_localidad_container').fadeIn();
			if (entity) {	// Entity comes from getById callback
				$('#otra_localidad').val(entity.localidad);
			} else {
				$('#otra_localidad').val('');
			}
		} else {
			$('#otra_localidad_container').fadeOut();
		}
	}	 
	
	/**
	 * Busca clientes
	 */
	function searchCliente() {
		
		$.fn.getList('clientes_buscar', 'listaClientes', 'clienteSearchForm', cols);
	}
	 
	 
	/**
	 * Guarda un cliente
	 */
	function saveCliente() {
		$.fn.send('clientes_agregar', 'clienteForm', 'button-save-cliente', null, reloadList);
	}
	
	/**
	 * Borrar un cliente
	 */
	function deleteCliente() {
		
		if (confirm("Realmente quieres eliminar este cliente?")) {
			var value = ( $(":checked")[0]).value;
			$.fn.send('clientes_borrar', null , null, 'id='+value , reloadList);
		}
	}
	
	/**
	 * Reload cliente list
	 */
	function reloadList() {
		
		$.fn.getList('clientes_getClientes', 'listaClientes', null, cols);
	}
	
	/**
	 * Edit clientes
	 */
	function getCliente() {
		
		$("#agregarCliente").modal();
		
		var value = ( $(":checked")[0]).value;
		$.fn.getById('clientes_getCliente', value, toggleLocalidad);
	}
</script>

<div class="page-header">
	<h1>
		Clientes
		<br/>
		<small>Administraci&oacute;n de clientes</small>
	</h1>
</div>

<div>

	
	<!-- 
		Busqueda
	 -->
	<div class="well span11" style="margin-bottom:10px;padding-bottom:0px;">
		<form id="clienteSearchForm" class="form-inline" style="margin-bottom:0px;padding-bottom:0px;">
			<div class="control-group">
				<input type="text" placeholder="Nombre ... " id="nombre" name="clienteDTO.nombre" class="input-medium">
				<input type="text" placeholder="Apellido ..." id="apellido" name="clienteDTO.apellido" class="input-medium">
				<input type="text" placeholder="DNI ..." id="dni" name="clienteDTO.dni" class="input-medium">
				<input type="text" placeholder="Direccion ..." id="direccion" name="clienteDTO.direccion"  class="input-large">
				
				<a class="btn" id="searchButton"><i class="icon-search"></i></a>
			</div>
		</form>
	</div>
	
	
	<!-- 
		Opciones
	  -->
	<div class="option-container">
		<a class="btn" id="refreshListButton"><i class="icon-refresh"></i></a>
		<a class="btn" id="agregarButton"><i class="icon-plus"></i></a>
		<a class="btn" id="editButton"><i class="icon-edit"></i></a>
		<a class="btn" id="deleteButton"><i class="icon-trash"></i></a>
	</div>
	
	
	
	<!-- 
		Listado de clientes 
	-->
	<form id="clienteListForm">
	<table class="table table-hover span12" style="margin:0">
		<thead>
			<tr>
				<th></th>
				<th>Nombre</th>
				<th>Apellido</th>
				<th>Tel&eacute;fono</th>
				<th>E-mail</th>
				<th>Direcci&oacute;n</th>
				<th>Localidad</th>
				<th>Provincia</th>
			</tr>
		</thead>
		<tbody id="listaClientes">
		</tbody>		
	</table>
	</form>
     
     
    <!--
    	 Agregar cliente 
      -->
    <div id="agregarCliente" class="modal hide agregarModalForm" tabindex="-1" role="dialog" aria-labelledby="agregarClienteLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel">Agregar cliente</h3>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 		
		   	<form id="clienteForm" class="form-horizontal">
				<div>
					<input type="hidden" id="id" name="clienteDTO.id" />
				
					<label class="control-label" for="nombre">Nombre</label>
					<div class="controls">
						<input type="text" id="nombre" name="clienteDTO.nombre" class="input-large">
					</div>

					<label class="control-label" for="apellido">Apellido</label>
					<div class="controls">
						<input type="text" id="apellido" name="clienteDTO.apellido" class="input-large">
					</div>

					<label class="control-label" for="nacimiento">Nacimiento</label>
					<div class="controls">
						<div class="input-append date" id="nacimientoDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
    						<input class="span2" size="16" type="text" value="01/01/1970" id="nacimiento" name="clienteDTO.nacimiento">
						    <span class="add-on" id="nacimiento-calendar"><i class="icon-calendar"></i></span>
    					</div>    					
					</div>
					
					<label class="control-label" for="telefono">T&eacute;lefono</label>
					<div class="controls">
						<input type="text" id="telefono" name="clienteDTO.telefono" class="input-large">
					</div>
					
					<label class="control-label" for="email">E-mail</label>
					<div class="controls">
						<input type="text" id="email" name="clienteDTO.email" class="input-large">
					</div>	
					
					<label class="control-label" for="dni">DNI</label>
					<div class="controls">
						<input type="text" id="dni" name="clienteDTO.dni" class="input-large">
					</div>	
					
					<label class="control-label" for="direccion">Direcci&oacute;n</label>
					<div class="controls">
						<div class="input-prepend">
							<input class="span2" id="direccion"  name="clienteDTO.direccion" type="text">
						</div>
					</div>	
					
					<label class="control-label" for="localidad">Localidad</label>
					<div class="controls">
						<div class="input-prepend">
							<select id="localidad" name="clienteDTO.localidad" >
								<option value="">Otra localidad</option>
							</select>
						</div>
					</div>	
					<div class="controls" id="otra_localidad_container">
						<div class="input-prepend">
							<input class="span2" id="otra_localidad" name="clienteDTO.otra_localidad" placeholder="Otra localidad ..." type="text">
						</div>
					</div>
					
					<label class="control-label" for="provincia">Provincia</label>
					<div class="controls">
						<div class="input-prepend">
							<select  id="provincia"  name="clienteDTO.provincia" >
							</select>
						</div>
					</div>					
				</div>
		    </form>
   		</div>
   		
   		<div class="modal-footer">
    		<button class="btn btn-primary" id="button-save-cliente" data-loading-text="Enviando..." >Guardar</button>
    		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    	</div>
    </div>
    
    
    
    
</div>